<template>
  <div
    class="chatObject"
    :class="[isSelf ? 'right' : 'left']"
  >
    <div
      class="Hportait display"
      :class="[isSelf ? 'right' : 'left']"
    >
      <img :src="userUrl" alt="" />
    </div>
    <div
      class="bubble display"
      :class="[isSelf ? 'right' : 'left']"
    >
      <div :class="[isSelf ? 'rigTag' : 'lefTag']"></div>
      <div :class="[isSelf ? 'word_right' : 'word_left']">
        <span>{{ msg }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["isSelf", "msg", "userUrl"],
  methods: {
    pageJump() {
      this.$router.push("/chat/chat-info")
    },
  },
}
</script>

<style scoped lang="scss">
.display {
  display: inline-block;
}
.left {
  float: left;
}
.right {
  float: right;
}
.chatObject {
  width: 100%;
  /* height: 38px; */
  float: left;
  margin-bottom: 15px;
  overflow: hidden;
}
.Hportait img {
  width: 38px;
  height: 38px;
  margin-right: 5px;
  margin-left: 12px;
  vertical-align: middle;
}
.bubble {
  max-width: 68%;
  margin-left: 5px;
  position: relative;
}
.word_left {
  background-color: $white;
  line-height: 38px;
  color: #000;
  border-radius: 4px;
  padding: 0 auto;
  word-break: break-all;
}
.word_right {
  background-color: #a5e9a5;
  line-height: 38px;
  color: #000;
  border-radius: 4px;
  padding: 0 auto;
  word-break: break-all;
}
.bubble span {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
  text-align: left;
}
.lefTag {
  height: 0px;
  width: 0px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent $white transparent transparent;
  position: absolute;
  left: -16px;
  top: 21px;
  margin-top: -8px;
}
.rigTag {
  height: 0px;
  width: 0px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent transparent #a5e9a5;
  position: absolute;
  right: -16px;
  top: 21px;
  margin-top: -8px;
}
</style>
